import React, {PropsWithChildren} from 'react'
import {PickerOption} from "@nutui/nutui-react-taro/dist/types/packages/picker/types";
import {Cell, Form, Picker} from "@nutui/nutui-react-taro";

export interface PickerFormItemProps extends PropsWithChildren {
    options:(PickerOption | PickerOption[])[]
    label:string
    name:string
    required?:boolean
}

const PickerFormItem: React.FC<PickerFormItemProps> = ({options,name,label,required}) => {
    return <>
        <Form.Item label={label} name={name}
                   getValueFromEvent={(...args) => args[1]}
                   onClick={(_, ref: any) => {
                       ref.open()
                   }}
                   trigger="onConfirm"
                   required={required}
                   rules={required?[{required: true, message: `请选择${label}`}]:undefined}
        >
            <Picker options={options}>
                {value => {

                    return <Cell style={{
                        padding: 0,
                        // @ts-ignore
                        '--nutui-cell-divider-border-bottom': '0'
                    }} className={"nutui-cell--clickable"} title={value.length
                        ? value[0]
                        : '请选择'}></Cell>
                }}
            </Picker>
        </Form.Item>
    </>
}

export default PickerFormItem


